<template>
	<div class="tagLinkWrap">
        <div class="tagLink">
            <el-tag 
                v-for="(item,index) in tagArray" 
                :key="item.path"
                :class="{'tagNow':typeof item.tagNow != 'undefined' && item.tagNow}"
                @click="tagClick(item)"
                @close="handleClose(item,index)"
                :closable="item.path != '/index'">
                {{item.sideBarName}}
            </el-tag>
        </div>
	</div>
</template>
<script type="text/javascript">
    import useRoute  from '@/store/route.js'
    import { mapState,mapActions } from 'pinia';
	export default{
        props:{
            routeConfig:{
                type:Object,
                default:() => {}
            }
        },
		data () {
			return {
				routeConfigArr:[],
                tagArray:[{
                    path: '/index',
                    sideBarName:"首页",
                }],
			}
		},
        computed: {
            ...mapState(useRoute, ['nowItem'])
        },
        created(){
			this.routeConfigArr = this.routeConfig;
		},
		mounted (){
            this.getPageInfo()
        },
		components : {
			
		},
		methods : {
			getPageInfo(){
                let routePath = this.nowItem.path;
                var isHasIn = false;
                if(this.tagArray.length != 0){
                    this.tagArray.forEach(item => {
                        item.tagNow = false;
                    });
                    //判断是否已存在
                    for(let j = 0;j < this.tagArray.length;j++){
                        let tagItem = this.tagArray[j];
                        if(tagItem.path == routePath){
                            tagItem.tagNow = true;
                            isHasIn = true;
                        }
                    }
                }
                if(!isHasIn){
                    var useItem = {};
                    //不存在，进行新添加
                    for(let i = 0 ;i < this.$util.treeToArray(this.routeConfigArr).length;i++){
                        useItem = this.$util.treeToArray(this.routeConfigArr)[i];
                        if(useItem.path == routePath){
                            useItem.tagNow = true;
                            this.tagArray.push(useItem);
                            break;
                        }
                    }
                }
			},
            handleClose(item,index){
                var beforIndex = index;
                this.tagArray.splice(index,1);
                if(item.tagNow){
                    if(this.tagArray.length > 0){
                        if(beforIndex > (this.tagArray.length -1 )){
                            var pushItem = this.tagArray[this.tagArray.length -1];
                            this.$mitt.emit("tagClick",pushItem);
                        }else{
                            var pushItem = this.tagArray[beforIndex];
                            this.$mitt.emit("tagClick",pushItem);
                        }
                    }
                }
            },
            tagClick(item){
                this.$mitt.emit("tagClick",item);
            }
		}
	}
</script>
<style type="text/css" lang="less">
	.tagLinkWrap{
        background:#F2F3F5;
        padding:8px 27px 8px 20px;
        .tagLink{
            white-space: nowrap;
            overflow:hidden;
            overflow-x:auto;
        }
        .tagLink::-webkit-scrollbar{
            display:none;
        }
        .el-tag{
            margin-right:6px;
            background:white;
            cursor:pointer;
            border:none;
            height:28px;
            line-height:30px;
            color: #4F5969;
        }
        .el-tag:hover{
            color:#303133;
        }
        .el-tag .el-icon{
            background:white;
            color: #4F5969;
        }
        .el-tag .el-icon:hover{
            background: #eee;
            color:#303133;
        }
        .el-tag:last-child{
            margin-right:0px;
        }
        .tagNow.el-tag{
            background:#409eff;
            color:white;
        }
    }
</style>